<template>
	<view class="page">
		<up-swiper :height="250" :list="bannerList">
		</up-swiper>
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<view class="menubox">
			<template v-for="(item,index) in menus" :key="index">
				<view class="item" @tap="onTapItem(item)">
					<image class="item-icon" :src="item.icon"></image>
					<view class="item-title">{{ item.title }}</view>
					<button class="item-opentype" :open-type="item.openType"></button>
				</view>
			</template>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref, onUnmounted } from 'vue';
	import { onLoad, onReady, onShow, onHide } from '@dcloudio/uni-app'

	console.log('index setup')

	onLoad((options : any) => {
		console.log('index onLoad')
	})
	onShow(() => {
		console.log('index onShow')
	})
	onMounted(() => {
		console.log('index onMounted')
	})
	onReady(() => {
		console.log('index onReady')
	})
	onHide(() => {
		console.log('index onHide')
	})
	onUnmounted(() => {
		console.log('index onUnmounted');
	})
	const bannerList = ref([
		'https://soonsmart.keji.io/douyin/upfile/874CF5941704157763589B815.png',
		'https://soonsmart.keji.io/douyin/upfile/F816E1D3170415776498850BA.png',
		'https://soonsmart.keji.io/iopctem/2023-12/20/1703060184653.jpg',
		'https://soonsmart.keji.io/douyin/upfile/0960C5A8170415776536973AE.png',
		'https://oss.jianyejia.cn/pics/2023/05/26/095526.7257d288d21a426dbeee01daa1263d9f.png',
		'https://oss.jianyejia.cn/pics/2023/05/12/d89198f3d08045498d57e1466e6feaed.jpg',
		'https://oss.jianyejia.cn/pics/2021/06/01/155610.bb069164f0ee47be82ebd6e1236ec6f2.jpg',
		'https://oss.jianyejia.cn/pics/2023/05/18/142726.d63f6abd1b764655a97382ab19524b6c.jpg'
	])
	interface MenuModel {
		icon ?: string,
		path ?: string,
		title ?: string,
		requireLogin ?: boolean,
		beforeJump ?: Function,
		openType ?: string,
		enable ?: boolean,
	}
	const menus = ref<Array<MenuModel>>([])
	const onTapItem = (item : MenuModel) => {
		if (item.openType) {
			return
		}
		if (item.beforeJump) {
			item.beforeJump();
			return
		}
		if (item.path) {
			uni.navigateTo({
				url: item.path
			})
		}
	}
</script>
<style lang="scss" scoped>
	.menubox {
		padding-left: 32px;
		padding-right: 32px;
		padding-bottom: 60px;
		width: 100%;
		background-color: white;
		margin-top: 20px;
		box-sizing: border-box;
		border-radius: var(--border-radius);
		flex-wrap: wrap;

		.item {
			width: 186px;
			height: 180px;
			text-align: center;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			background: linear-gradient(to bottom, #E9F0FF, #FBFDFF);
			border: 1px solid #E9F0FF;
			box-sizing: border-box;
			border-radius: var(--border-radius);
			margin-top: 60px;

			&:nth-child(3n-1) {
				margin-left: 40px;
				margin-right: 40px;
			}

			&:active {
				background: #F5F6F7;
			}

			.infoIcon {
				width: 80px;
				height: 80px;
				margin-bottom: 14px;
			}

			.infoTitle {
				color: #322B33;
				font-size: 28px;
			}

			.openType {
				width: 100%;
				opacity: 0;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
</style>